<template>
    <div class="warehouse-management-system" style="width:1600px;">
      <!-- 顶部标题栏 -->
      <!-- <div class="header">
        <span>仓库编号：{{route.query.whouseNum}}</span>
        <div class="header-actions">
          <el-button type="primary" >刷新</el-button>
          <el-button type="success" >新增</el-button>
        </div>
      </div> -->
  
      <!-- 主内容区 -->
      <div class="main-content">
        <!-- 仓库信息卡片 -->
        <el-card class="warehouse-info-card">
          <template #header>
            <div class="card-header">
              <span class="warehouse-code">仓库编号：{{ warehouseData.whouseNum }}</span>
              <div class="action-buttons">
                <!-- <el-button type="primary"  @click="editWarehouse">编辑</el-button> -->
                <el-button type="danger"  @click="deleteWarehouse">删除</el-button>
                <el-button type="warning"  @click="updatelock">锁定</el-button>
                <el-button type="info"  @click="updatestate">停用</el-button> 
                 <el-button type="primary"  @click="fanhui">返回</el-button>
              </div>
            </div>
          </template>
  
          <div class="warehouse-details">
            <!-- 第一行信息 -->
            <div class="detail-row">
              <span>仓库名称：</span>
              <span>{{ warehouseData.whouseName}}</span>
            </div>
            <div class="detail-row">
              <span>仓库容量：</span>
              <span>{{ warehouseData.capacity }}m³</span>
            </div>
            <div class="detail-row">
              <span>所属部门：</span>
              <span>
                <p v-if="warehouseData.dementperId==1">仓储部</p>
              </span>
            </div>
  
            <!-- 第二行信息 -->
            <div class="detail-row">
              <span>仓库主管：</span>
              <span>
                <p v-if="warehouseData.dementperId==1">张三</p>
                <p v-if="warehouseData.dementperId==2">李四</p>
                <p v-if="warehouseData.dementperId==3">王五</p>
                <p v-if="warehouseData.dementperId==4">赵六</p>
                <p v-if="warehouseData.dementperId==5">萧七</p>
              </span>
            </div>
            <div class="detail-row">
              <span>联系电话：</span>
              <span>{{ warehouseData.phone }}</span>
            </div>
            <div class="detail-row">
              <span>仓库地址：</span>
              <span>{{ warehouseData.wHouseAddr }}</span>
            </div>
  
            <!-- 第三行信息 -->
            <div class="detail-row">
              <span>创建人：</span>
              <span>{{ warehouseData.createPeople }}</span>
            </div>
            <div class="detail-row">
              <span>创建时间：</span>
              <span>{{  moment(warehouseData.createDateTime).format('YYYY-MM-DD')}}</span>
            </div>
            <div class="detail-row">
              <span>更新人：</span>
              <span>{{ warehouseData.updatePeople }}</span>
            </div>
            <div class="detail-row">
              <span>更新时间：</span>
              <span>
                <p v-if="warehouseData.updateDateTime!=null">{{moment(warehouseData.updateDateTime).format('YYYY-MM-DD')}}</p>
                <p v-else></p>
              </span>
            </div>
  
            <!-- 状态信息 -->
            <div class="status-block">
              <span >状态：<p v-if="warehouseData.state==false"> <el-tag type="success">启用</el-tag></p>
                <p v-else ><el-tag type="danger">禁用</el-tag></p>
            </span>
              <span>库位数量：{{ positionCount }}</span>
            </div>
          </div>
        </el-card>
  
        <!-- 仓位管理区域 -->
        <el-card class="position-management">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="库位管理" name="positions">
              <!-- 查询表单 -->
              <el-form :inline="true" :model="queryParams" class="search-form">
                <el-form-item label="库位编号">
                  <el-input v-model="queryParams.LocaTionNum" placeholder="请输入仓位编号" clearable style="width: 180px" />
                </el-form-item>

                <el-form-item label="库位名称">
                  <el-input v-model="queryParams.LocaTionName" placeholder="请输入仓位名称" clearable style="width: 180px" />
                </el-form-item>

                <el-form-item label="库位状态">
                  <el-select v-model="queryParams.LocaTionCStatus" placeholder="请选择库位状态" clearable style="width: 160px" >
                    <el-option label="启用" value="启用" />
                    <el-option label="停用" value="停用" />
                  </el-select>
                </el-form-item>
                <el-form-item label="库位主管">
                    <el-select v-model="queryParams.LocaTionManage" placeholder="请选择库位主管" clearable style="width: 160px" >
                        <el-option v-for="item in useritems" :label="item.userName" :value="item.userID"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="getWhouseNumlist1()">查询</el-button>
                  <el-button @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
  
              <!-- 操作按钮组 -->
              <!-- <div class="table-actions">
                <el-button type="success" plain @click="exportData">
                  <el-icon><Download /></el-icon>导出
                </el-button>
                <el-button type="warning" plain @click="batchEnable">
                  <el-icon><CircleCheck /></el-icon>批量启用
                </el-button>
                <el-button type="danger" plain @click="batchDisable">
                  <el-icon><CircleClose /></el-icon>批量停用
                </el-button>
              </div> -->
  
              <!-- 仓位表格 -->
              <el-table
                :data="kuweis"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column type="index" label="序号"width="80" />       
                <el-table-column prop="locaTionNum" label="库位编号" width="120" align="center" />
                <el-table-column prop="locaTionName" label="库位名称" width="150" align="center" />
                <el-table-column prop="locaTionCapacity" label="库位容量(m³)" width="120" align="center" />
                <el-table-column prop="locaTionManage" label="库位主管" width="120" align="center" >
                    <template v-slot="scope">
                        <p v-if="scope.row.locaTionManage==1">张三</p>
                        <p v-if="scope.row.locaTionManage==2">李四</p>
                        <p v-if="scope.row.locaTionManage==3">王五</p>
                        <p v-if="scope.row.locaTionManage==4">李六</p>
                    </template>
                </el-table-column>
                <el-table-column prop="locaTionSort" label="排序" width="80" sortable align="center" />
                <el-table-column prop="locaTionCStatus" label="状态" width="100" align="center">
                </el-table-column>
                <el-table-column prop="locaTionRember" label="备注" align="center" />
              </el-table>
  
              <!-- 分页组件 -->
              <el-pagination
                v-model:current-page="page.pageindex"
                :page-size="page.pagesize"
                :total="page.totalcount"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                prev-text="上一页"
                next-text="下一页"
              />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>
  </template>
  
  <script setup>
   import { ref, reactive, computed, onMounted } from 'vue'
  import { Download, CircleCheck, CircleClose, Edit, Delete } from '@element-plus/icons-vue'
  import {useRoute,useRouter} from 'vue-router'
  import axios from 'axios'
  import moment from 'moment'
import { ElMessageBox,ElMessage } from 'element-plus'
  
  const router = useRouter()
  const route = useRoute()
  onMounted(()=>{
    getWhouseNumlist();
    getWhouseNumlist1();
    getDepidByUser();
  })
  const positionCount=ref();
  // 仓库数据
  const warehouseData = ref({})
  //查询仓库
  const getWhouseNumlist = () => {
    axios({
      url: 'http://localhost:5170/api/User/GetWhouseNumALL',
      method: 'get',
      params: {
        WhouseNum: route.query.whouseNum, 
        Pageindex:page.pageindex,
        Pagesize:page.pagesize
      }
    })
    .then(res => {
      if(res.data.code == 101){
        warehouseData.value = res.data.list[0]
        console.log('根据仓库编号查询出的数据', warehouseData)
      }
    })
  }
  const page=reactive({
    pageindex:1,
    pagesize:15,
    totalcount:0,
    totalpage:0
  })
  const kuweis=ref([]);
    //查询仓库
    const getWhouseNumlist1 = () => {
    axios({
      url: 'http://localhost:5170/api/User/GetWhouseNumALL',
      method: 'get',
      params: {
        WhouseNum: route.query.whouseNum,
        Pageindex:page.pageindex,
        Pagesize:page.pagesize,
        LocaTionNum:queryParams.LocaTionNum,
        LocaTionName:queryParams.LocaTionName,
        LocaTionManage:queryParams.LocaTionManage,
        LocaTionCStatus:queryParams.LocaTionCStatus,
      }
    })
    .then(res => {
      if(res.data.code == 101){
        kuweis.value = res.data.list
        page.totalcount=res.data.totalCount;
        page.totalpage=res.data.totalPage;
        positionCount.value=kuweis.value.length
        console.log('根据仓库编号查询出的库位信息', kuweis)
        console.log('库位数量', positionCount)
      }
    })
  }
  const useritems=ref([]);
//根据部门查询部门成员
const getDepidByUser=()=>{
  axios({
    url:'http://localhost:5170/api/User/GetDepIdUser',
    method:'get',
    params:{
      DepermentID:1
    }
  })
  .then(res=>{
    if(res.data.code==101){
      useritems.value=res.data.list;
    }
  })
}
  
  // 查询参数
  const queryParams = reactive({
    LocaTionNum: '',
    LocaTionName: '',
    LocaTionManage: '',
    LocaTionCStatus:''
  })
  
  // 表格多选
  const multipleSelection = ref([])
  const resetQuery = () => {
    Object.keys(queryParams).forEach(key => {
      queryParams[key] = ''
    })
  }
  
  const handleSelectionChange = (val) => {
    multipleSelection.value = val
  }
  
  const batchEnable = () => {
    console.log('批量启用:', multipleSelection.value)
  }
  
  const batchDisable = () => {
    console.log('批量停用:', multipleSelection.value)
  }
  
  const exportData = () => {
    console.log('导出数据')
  }
  
  const editWarehouse = () => {
    console.log('编辑仓库')
  }
  //删除仓库
  const deleteWarehouse = () => {
    console.log(positionCount.value,'数量')
    if(positionCount.value>0){
      ElMessageBox.confirm(
    '当前仓库下还有库位存在，您确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })    
    .then(() => {
      axios({
      url:'http://localhost:5162/api/User/DeleteWhosue',
      method:'post',
      data:route.query.whouseID
    })
    .then(res=>{
      if(res.data.code==101){
        ElMessage({
        type: 'success',
        message: '删除成功',
      })
        router.push("/ShowWhouse")
      }
    })
    .catch(error=>{
      console.log(error)
    })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
  }
    else{
    ElMessageBox.confirm(
    '您确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      axios({
      url:'http://localhost:5162/api/User/DeleteWhosue',
      method:'post',
      data:route.query.whouseID
    })
    .then(res=>{
      if(res.data.code==101){
        ElMessage({
        type: 'success',
        message: '删除成功',
      })
        router.push("/ShowWhouse")
      }
    })
    .catch(error=>{
      console.log(error)
    })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
    }
    
   




  }
  //停用仓库
  const updatestate=()=>{
    ElMessageBox.confirm(
    '您确定要停用仓库吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })    

    .then(() => {
      axios({
      url:'http://localhost:5162/api/User/UpdateWhouseState',
      method:'post',
      data:{
        whouseNum:route.query.whouseNum
      }
    })
    .then(res=>{
      if(res.data.code==101){
        ElMessage.success("操作成功");
        router.push("/ShowWhouse")
      }
    })
    .catch(error=>{
      console.log(error)
    })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
    

  }
//锁定仓库
  const updatelock=()=>{
    ElMessageBox.confirm(
    '您确定要锁定仓库吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })    

    .then(() => {
      axios({
      url:'http://localhost:5162/api/User/UpdateWhouseLock',
      method:'post',
      data:{
        whouseNum:route.query.whouseNum
      }
    })
    .then(res=>{
      if(res.data.code==101){
        ElMessage.success("操作成功");
        router.push("/ShowWhouse")
      }
    })
    .catch(error=>{
      console.log(error)
    })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
  }
  
  const handleSizeChange = (val) => {
   page.pagesize=val;
   getWhouseNumlist1();

  }
  
  const handlePageChange = (val) => {
    page.pageindex=val;
    getWhouseNumlist1();
  }

  const fanhui=()=>{
    router.push("/ShowWhouse");
  }
  </script>
  
  <style scoped>
  .warehouse-management-system {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
      'Microsoft YaHei', Arial, sans-serif;
    background-color: #f0f2f5;
    min-height: 100vh;
    padding: 20px;

  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e6e6e6;
  }
  
  .header h2 {
    color: #333;
    font-weight: 500;
    margin: 0;
  }
  
  .main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .warehouse-info-card {
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .warehouse-code {
    font-weight: bold;
    color: #333;
  }
  
  .action-buttons {
    display: flex;
    gap: 8px;
  }
  
  .warehouse-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  
  .detail-row {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  
  .detail-row span:first-child {
    font-weight: bold;
    min-width: 80px;
    color: #606266;
  }
  
  .detail-row span:not(:first-child) {
    margin-left: 10px;
    color: #909399;
  }
  
  .status-block {
    grid-column: span 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 10px;
  }
  
  .status-text {
    color: #67c23a;
    font-weight: bold;
  }
  
  .position-management {
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  
  .search-form {
    margin-bottom: 20px;
  }
  
  .table-actions {
    text-align: right;
    margin-bottom: 15px;
  }
  
  .el-table {
    margin-bottom: 20px;
  }
  
  .el-pagination {
    justify-content: flex-end;
    margin-top: 20px;
  }
  
  .el-button.is-plain {
    border: 1px solid #dcdfe6;
  }
  
  .el-tag {
    font-size: 12px;
  }
  </style>



